<template>
  <div id="app">
    <el-table :data="filterData" border v-loading="loading">
      <el-table-column prop="date" label="时间" width="180"></el-table-column>
      <el-table-column prop="name" label="名称" width="180"></el-table-column>
      <el-table-column prop="address" label="地址" width="180"></el-table-column>
    </el-table>
    <el-pagination
      laout="prev,pager,next,sizes,jumper"
      :total="tableData.length"
      :page-sizes="[5,10,20]"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    >

    </el-pagination>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  mounted(){
    let _this=this;
    setTimeout(function(){
      _this.loading=false;
    },4000)
  },
  computed:{
    filterData:function(){
      let filterData=this.tableData.slice(
        (this.pageNum-1)*this.pageSize,
        this.pageNum*this.pageSize
      );
      return filterData;
    }
  },
  components: {
    // HelloWorld
  },
  data:function(){
    return{
      tableData:[
        {
          date:"2020-12-10",
          name:"Tom",
          address:"深圳市宝安区宝安大道5010弄"
        },
        {
          date:"2020-12-10",
          name:"Jack",
          address:"深圳市宝安区宝安大道5010弄"
        },{
          date:"2020-12-10",
          name:"Mary",
          address:"深圳市宝安区宝安大道5010弄"
        },{
          date:"2020-12-10",
          name:"James",
          address:"深圳市宝安区宝安大道5010弄"
        },{
          date:"2020-12-10",
          name:"Tony",
          address:"深圳市宝安区宝安大道5010弄"
        },{
          date:"2020-12-10",
          name:"Jonn",
          address:"深圳市宝安区宝安大道5010弄"
        },{
          date:"2020-12-10",
          name:"Grenn",
          address:"深圳市宝安区宝安大道5010弄"
        },{
          date:"2020-12-10",
          name:"Bob",
          address:"深圳市宝安区宝安大道5010弄"
        },{
          date:"2020-12-10",
          name:"Alice",
          address:"深圳市宝安区宝安大道5010弄"
        },{
          date:"2020-12-10",
          name:"Thomas",
          address:"深圳市宝安区宝安大道5010弄"
        },{
          date:"2020-12-10",
          name:"Cindy",
          address:"深圳市宝安区宝安大道5010弄"
        },{
          date:"2020-12-10",
          name:"Jermey",
          address:"深圳市宝安区宝安大道5010弄"
        },{
          date:"2020-12-10",
          name:"Macile",
          address:"深圳市宝安区宝安大道5010弄"
        },{
          date:"2020-12-10",
          name:"Mike",
          address:"深圳市宝安区宝安大道5010弄"
        },{
          date:"2020-12-10",
          name:"Kerry",
          address:"深圳市宝安区宝安大道5010弄"
        },

      ],
      loading:true,
      border:true,
      pageSize:10,
      pageNum:1,
    }
  },
  methods:{
    handleSizeChange:function(pageSize){
      this.pageSize=pageSize;
    },
    handleCurrentChange:function(pageNum){
      this.pageNum=pageNum;
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

</style>
